<template>
  <div class="backgd">
    <div class="slider">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="../../assets/1.jpg"
              alt=""
              :style="{ height: '100%', width: '100%' }"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="../../assets/2.jpg"
              alt=""
              :style="{ height: '100%', width: '100%' }"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="../../assets/3.jpg"
              alt=""
              :style="{ height: '100%', width: '100%' }"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="../../assets/4.png"
              alt=""
              :style="{ height: '100%', width: '100%' }"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="../../assets/5.png"
              alt=""
              :style="{ height: '100%', width: '100%' }"
            />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
    </div>
    <div class="lists">
      <div class="activity">
        <span class="listname">最近活动</span>
        <div class="listsline"></div>
        <div class="textbox">
          <div
            v-for="item in actlist"
            :key="item.id"
            class="act"
            @click="goClubActivity"
          >
            {{ item.name }} <span>{{ item.date }}</span>
          </div>
        </div>
      </div>
      <div class="shows">
        <span class="listname">最近公告</span>
        <div class="listsline"></div>
        <div class="textbox">
          <div
            v-for="item in noticelist"
            :key="item.id"
            class="act"
            @click="goClubNotice"
          >
            {{ item.name }} <span>{{ item.date }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="clublists">
      <span>社团列表</span>
      <div class="listline"></div>
      <div class="listbox">
        <div
          class="clubs"
          v-for="club in clublist"
          :key="club.index"
          @click="goClubLists"
        >
          <img :src="club.img" alt="" />
          <div class="clubname">{{ club.clubname }}</div>
        </div>
      </div>
      <div v-if="shows">
        <img src="../../assets/club/wushu.jpg" alt="" />
        <img src="../../assets/club/qipan.jpg" alt="" />
        <img src="../../assets/club/jita.jpg" alt="" />
        <img src="../../assets/club/yumaoqiu.jpg" alt="" />
        <img src="../../assets/club/wudao.jpg" alt="" />
        <img src="../../assets/club/guoxue.jpg" alt="" />
        <img src="../../assets/club/dianjing.jpg" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import axios from "axios";

export default {
  name: "ClubIndex",
  data() {
    return {
      clublist: "",
      noticelist: "",
      actlist: "",
      shows:false,
    };
  },
  mounted() {
    new Swiper(".swiper-container", {
      //mousewheel: true, //滚轮
      autoplay: {
        //自动开始
        delay: 1500, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 分页器可以点击
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    //获取社团列表
    axios
      .get("http://127.0.0.1/clublist_yang")
      .then((res) => {
        this.clublist = res.data;
        // console.log(this.clublist);
      })
      .catch((err) => {
        console.log("获取数据失败" + err);
      });
    //获取活动列表
    axios
      .get("http://127.0.0.1/actlist_yang/all")
      .then((res) => {
        // console.log(res.data);
        this.actlist = res.data;
      })
      .catch((err) => {
        console.log("获取数据失败" + err);
      });
    //获取公告列表
    axios
      .get("http://127.0.0.1/noticelist_yang/all")
      .then((res) => {
        // console.log(res.data);
        this.noticelist = res.data;
      })
      .catch((err) => {
        console.log("获取数据失败" + err);
      });
  },
  methods: {
    goClubActivity() {
      this.$router.push("/ClubActivity");
    },
    goClubNotice() {
      this.$router.push("/ClubNotice");
    },
    goClubLists() {
      this.$router.push("/ClubLists");
    },
  },
};
</script>

<style scoped>
.backgd {
  position: relative;
  width: 1320px;
  height: 1300px;
  margin: 20px 300px 0 300px;
  border: 0;
}
.slider {
  float: right;
  background-color: #ccc;
  height: 400px;
  width: 1100px;
}
.swiper-container {
  height: 400px;
  width: 1100px;
}
.lists {
  position: absolute;
  top: 430px;
  height: 300px;
  width: 1320px;
}
.listname {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 22px;
  font-weight: 700;
}
.listsline {
  position: absolute;
  top: 50px;
  width: 600px;
  height: 2px;
  background-color: skyblue;
}
.activity {
  position: absolute;
  top: 0;
  left: 0;
  height: 296px;
  width: 600px;
  border: 2px solid #158ff9;
  border-radius: 20px;
  overflow: hidden;
}
.news {
  position: absolute;
  top: 0;
  left: 460px;
  height: 296px;
  width: 400px;
  border: 2px solid #158ff9;
  border-radius: 20px;
}
.shows {
  position: absolute;
  top: 0;
  right: 0;
  height: 296px;
  width: 600px;
  border: 2px solid #158ff9;
  border-radius: 20px;
  overflow: hidden;
}
.clublists {
  position: absolute;
  top: 760px;
  width: 1310px;
  height: 450px;
  border: 5px solid #158ff9;
  border-radius: 20px;
}
.clublists span {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 22px;
  font-weight: 700;
}
.listline {
  position: absolute;
  top: 50px;
  height: 5px;
  background-color: skyblue;
  width: 1310px;
}
.listbox {
  position: absolute;
  top: 70px;
  left: 45px;
  width: 1220px;
  height: 360px;
}

.clubs {
  float: left;
  margin: 5px;
  height: 170px;
  border: 2px solid #d3a8c6;
  width: 189px;
}
.clubs img {
  height: 140px;
  width: 189px;
}
.clubname {
  height: 26px;
  width: 189px;
  background-color: white;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 26px;
}
.textbox {
  position: absolute;
  top: 60px;
  left: 10px;
  height: 220px;
  width: 580px;
}
.act span {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 13px;
}
.textbox div {
  position: relative;
  padding-right: 100px;
  font-size: 16px;
  height: 30px;
  width: 480px;
  padding-left: 10px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 1px;
  text-overflow: ellipsis; /* 溢出显示省略号 */
  overflow: hidden; /* 溢出隐藏 */
  white-space: nowrap; /* 强制不换行 */
}
.textbox div:hover {
  text-indent: 6px;
}
</style>